<!DOCTYPE html>
<html>
<head>
<title>角色管理</title>
#@head()
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
	        <div class="ibox">
	            <div class="ibox-content">
	                <div class="fixed-table-toolbar">
	                    <div class="columns pull-left">
	                        <button type="button" class="btn btn-primary" onclick="add(0)">
	                            <i class="fa fa-plus" aria-hidden="true"></i>添加
	                        </button>
	                        <button type="button" class="btn btn-danger" onclick="batchRemove()">
	                            <i class="fa fa-trash" aria-hidden="true"></i>删除
	                        </button>
	                    </div>
	                    <div class="columns pull-right">
	                        <button class="btn btn-success" onclick="reLoad()">查询</button>
	                    </div>
	
	                    <div class="columns pull-right ">
	                        <input id="searchName" type="text" class="form-control" placeholder="">
	                    </div>

						<div class="columns pull-right ">
							<select name="searchField" id="searchField" class="form-control" ></select>
						</div>
	                </div>
	                <table id="exampleTable" class="table table-hover table-bordered" data-mobile-responsive="true"></table>
	            </div>
	        </div>
	    </div>
	</div>
</body>
#@footer()

<script type="text/javascript">

function del(id){
	layer.confirm('您确定要删除嘛？',function(){
		$.post('delete?id='+id,'',function(res){
			if(res.code==0){
				layer.msg(res.msg,{time:1000},function(){
					reLoad();
				})
			}
		})
	})
}
function add(){
	openWindow('添加','add')
}

function edit(id){
	openWindow('修改','edit?id='+id)
}

var prefix = ''; 
$(function(){
	load('');
})

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}

var columns = [
    {
        checkbox : true
    },
    {
        field : 'id',
        title : '编号',
        width : '60px'
    },
    {
        field : 'roleName',
        title : '角色名称',
    },
    {
        field : 'remark',
        title : '备注',
    },

    {
        field : 'gmtCreate',
        title : '创建时间',
        width : '160px'
    },
	{
        field : 'id',
		title : '操作',
		align : 'center',
        valign : 'center',
        width : '120px',
		formatter : function(value, row, index) {
            var e = '<a class=" '  + '" href="#" mce_href="#" title="编辑" onclick="edit(\''
                + row.id
                + '\')">编辑</a> &nbsp;';

			var d = '<a class="" href="#" title="删除"  mce_href="#" onclick="del(\''
				+ row.id
				+ '\')"> 删除 </a> ';
			return e + d;
		}
	} ];


var prefix = ctx +"./"
$(function() {
    var searchFieldHtml = '';
    for(var i=0;i<columns.length;i++){
        var data = columns[i];
        if (data.field!=undefined && data.field!='id'){
            searchFieldHtml += '<option value="'+data.field+'">'+data.title+'</option>';
        }
    }
    $("#searchField").html(searchFieldHtml);

    load();
});


function load(){
	$.initBootstrapTable("#exampleTable", {
		idField : "id",
	    url: prefix+"dataAjax",
	    queryParams: function(params) {
            return {
                // 传递参数查询参数
                searchField: $('#searchField').val(),
                searchName: $('#searchName').val(),
                offset: (params.offset / params.limit) + 1,
                limit:   params.limit
            };
        },
	    columns : columns ,
       	onPostBody : function () {
               //layer.msg("列表加载完成");
       	},
	});
}


function batchRemove() {
	var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
	if (rows.length == 0) {
		layer.msg("请选择要删除的数据");
		return;
	}
	
	layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
		btn : [ '确定', '取消' ]
	// 按钮
	}, function() {
		var param = '';

		// 遍历所有选择的行数据，取每条数据对应的ID
		$.each(rows, function(i, row) {
            param +='&ids=' + row['id'];
		});

		$.ajax({
			type : 'POST',
			data : param,
			url : prefix + 'batchRemove',
			success : function(r) {
				if (r.code == 0) {
					layer.msg(r.msg);
					reLoad();
				} else {
					layer.msg(r.msg);
				}
			}
		});
	}, function() {});
}
</script>
</html>



